---
title: Typography
description: The Typography component is used to render text with the correct typography style. This includes h1, h2, h3, h4, h5, h6, p, and caption elements.
docType: Demo
docGroup: Components
group: Presentation
components: [Typography]
---

# Typography

The `Typography` component is used to render text with the correct typography style.

### Headline 1

Set the `type` to `headline-1` to render as a `h1` element with the corresponding typography.

```demo source="./Headline1Example.tsx"

```

### Headline 2

Set the `type` to `headline-2` to render as a `h2` element with the corresponding typography.

```demo source="./Headline2Example.tsx"

```

### Headline 3

Set the `type` to `headline-3` to render as a `h3` element with the corresponding typography.

```demo source="./Headline3Example.tsx"

```

### Headline 4

Set the `type` to `headline-4` to render as a `h4` element with the corresponding typography.

```demo source="./Headline4Example.tsx"

```

### Headline 5

Set the `type` to `headline-5` to render as a `h5` element with the corresponding typography.

```demo source="./Headline5Example.tsx"

```

### Headline 6

Set the `type` to `headline-6` to render as a `h6` element with the corresponding typography.

```demo source="./Headline6Example.tsx"

```

### Subtitle 1

Set the `type` to `subtitle-1` to render as a `h6` element with the corresponding typography.

```demo source="./Subtitle1Example.tsx"

```

### Subtitle 2

Set the `type` to `subtitle-2` to render as a `h6` element with the corresponding typography.

```demo source="./Subtitle2Example.tsx"

```

### Body 1

Set the `type` to `body-1` to render as a `p` element with the corresponding typography.

```demo source="./Body1Example.tsx"

```

### Body 2

Set the `type` to `body-2` to render as a `p` element with the corresponding typography.

```demo source="./Body2Example.tsx"

```

### Caption

Set the `type` to `caption` to render as a `caption` element with the corresponding typography.

```demo source="./CaptionExample.tsx"

```

### Overline

Set the `type` to `overline` to render as a `span` element with the corresponding typography.

```demo source="./OverlineExample.tsx"

```

## Custom Typography Element

The typography styles can also be applied to other elements by using the `as`
prop or using the `typography` class name utility function.

```demo source="./CustomTypographyElement.tsx"

```

## Customizing Typography

The default typography can be configured by overriding the different typography
Sass variables when `@forward`ing or `@use`ing `react-md`. The typography types
can be customized by:

- providing `{TYPE}-custom-styles` map which would be merged and override any
  values in the `{TYPE}-recommended` styles map
- providing a `{TYPE}-styles` map which allows full control and ignores the recommended styles

So the variables for each typography type are:

- [$SASSDOC](base-custom-font-styles) which is applied to all `{TYPE}-recommended-styles`
- `headline-1`:
  - [$SASSDOC](headline-1-recommended-styles) merged with [$SASSDOC](headline-1-custom-styles)
  - or [$SASSDOC](headline-1-styles)
- `headline-2`:
  - [$SASSDOC](headline-2-recommended-styles) merged with [$SASSDOC](headline-2-custom-styles)
  - or [$SASSDOC](headline-2-styles)
- `headline-3`:
  - [$SASSDOC](headline-3-recommended-styles) merged with [$SASSDOC](headline-3-custom-styles)
  - or [$SASSDOC](headline-3-styles)
- `headline-4`:
  - [$SASSDOC](headline-4-recommended-styles) merged with [$SASSDOC](headline-4-custom-styles)
  - or [$SASSDOC](headline-4-styles)
- `headline-5`:
  - [$SASSDOC](headline-5-recommended-styles) merged with [$SASSDOC](headline-5-custom-styles)
  - or [$SASSDOC](headline-5-styles)
- `headline-6`:
  - [$SASSDOC](headline-6-recommended-styles) merged with [$SASSDOC](headline-6-custom-styles)
  - or [$SASSDOC](headline-6-styles)
- `subtitle-1`:
  - [$SASSDOC](subtitle-1-recommended-styles) merged with [$SASSDOC](subtitle-1-custom-styles)
  - or [$SASSDOC](subtitle-1-styles)
- `subtitle-2`:
  - [$SASSDOC](subtitle-2-recommended-styles) merged with [$SASSDOC](subtitle-2-custom-styles)
  - or [$SASSDOC](subtitle-2-styles)
- `body-1`:
  - [$SASSDOC](body-1-recommended-styles) merged with [$SASSDOC](body-1-custom-styles)
  - or [$SASSDOC](body-1-styles)
- `body-2`:
  - [$SASSDOC](body-2-recommended-styles) merged with [$SASSDOC](body-2-custom-styles)
  - or [$SASSDOC](body-2-styles)
- `caption`:
  - [$SASSDOC](caption-recommended-styles) merged with [$SASSDOC](caption-custom-styles)
  - or [$SASSDOC](caption-styles)
- `overline`:
  - [$SASSDOC](overline-recommended-styles) merged with [$SASSDOC](overline-custom-styles)
  - or [$SASSDOC](overline-styles)

The example below shows how to customize the default font family, font-weight,
and some typography types.

```demo source="./CustomizingTypographyExample.tsx"

```
